<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>16_动画-相关属性</title>

        <style>
            @keyframes move {
                0% {

                }

                100% {
                    transform: translateX(1100px);
                }
            }


            .outer {
                width: 1200px;
                height: 100px;
                border: 1px solid black;
            }

            .inner {
                width: 100px;
                height: 100px;
                background-color: cadetblue;

                /* （1）动画的名字 */
                animation-name: move;

                /* （2）动画的时长 */
                animation-duration: 5s;

                /* （3）动画延迟*/
                /* animation-delay: 2s; */

                /* （4）动画循环次数 */
                /* /* animation-iteration-count: 3; */
                /* animation-iteration-count: infinite; */

                /* （5）动画的方向 */
                /* animation-direction: normal;
                animation-direction: reverse;
                animation-direction: alternate;
                animation-direction: alternate-reverse; */

                /* （6）设置对象动画时间结束的状态 */
                /* animation-fill-mode: forwards;
                animation-fill-mode: backwards;
                animation-fill-mode: both; */

                /* （7） 控制动画的暂停和启动*/
                /* animation-play-state: paused; */
            }

            .inner:hover {
                animation-play-state: paused;
            }


        </style>

    </head>
    <body>
        <div class="outer">
            <div class="inner"></div>
        </div>
    </body>
</html>